<template>
  <div class="Home">
    <!-- OSS上传图片 -->
    <input type="file" multiple @click="noChange" />
    <button @click="onUpload">上传</button>

    <div class="BoxPageImgX">
      <a-card
        class="CardImgX"
        v-for="item in imgsList"
        :key="item.url"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" :src="item.url" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
      <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/a.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/d.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/e.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/f.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/g.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/h.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/j.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/j.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
        <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/e.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/f.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/g.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/h.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/j.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
       <a-card
        class="CardImgX"
        hoverable
        style="width: 200px"
      >
        <template #cover>
          <img alt="example" class="imgX" src="../../assets/j.png.png" />
        </template>
        <a-card-meta title="Europe Street beat">
        </a-card-meta>
      </a-card>
      <a-pagination class="Page" v-model:current="current" :total="50" show-less-items />
    </div>
  </div>
</template>

<script>
const OSS = require("ali-oss");
export default {
  data() {
    return {
      IMgXMock:[],
      imgsList: [],
      //OSS上传图片验证码
      client: new OSS({
        region: "oss-cn-beijing",
        bucket: "devin0831",
        accessKeyId: "LTAI5tF5SC1ZSCHLYiCa6NQh",
        accessKeySecret: "yVRUyZBOy8sXSmmw4rd0j08ZxOOEVN",
      }),
    };
  },
  created() {
  },
  methods: {
    //绑定事件
    noChange(e) {
      const files = e.target.files;
      const imgArr = [];
      console.log(imgArr,"imgArr");
      for (let file of files) {
        imgArr.push(this.onUpload(file));
      }
      Promise.all(imgArr).then((res) => {
        this.imgsList = res;
      });
      this.imgsList = files;
      console.log(this.imgsList,"imgsList:");
    },
    async onUpload(file) {
      const imgsData = await this.client.put(
        `${Math.random() * 100}_imgs`,
        file
      );
      return imgsData;
    },
  },
};
</script>

<style>
.BoxPageImgX {
  width: 100%;
  height: 700px;
  display: flex;
  flex-wrap: wrap;
}
.imgX {
  width: 200px;
  height: 200px;
}
.Page{
  position: absolute;
  bottom: 0;
}
</style>